<template>
  <el-container>
    <el-header>
      <index-header/>
    </el-header>
    <el-main>
      <!-- 实现table切换 -->
      <swiper></swiper>
      <div style="display: flex;width: 85%;margin: 0 auto;">

       <ul class="index-catalog">
          <li v-for="item in catalogList" :key="item.id">
            <el-link type="success" :underline="false" @click="getCatalog(item.id)">{{item.articleCatalog}}</el-link>
          </li>
        </ul>

        <article-list :style="{flex:3,minWidth:700+'px'}" :catalogId="this.catalogid"></article-list>
        <advertis :style="{flex:1,margin:'5px 10px'}"></advertis>
        
        
      </div>
    </el-main>
      <index-footer/>
      <back-up></back-up>
  </el-container>
</template>

<script>
import ArticleApi from '@/api/Article.js'
import IndexHeader from '../common/header.vue'
import IndexFooter from '../common/footer.vue'
import BackUp from '../common/backup.vue'
import Swiper from './components/Swiper.vue'
import ArticleList from './components/ArticleList.vue'
import Advertis from '../common/advertis.vue'
export default {
  data(){
    return{
      windowHeight:0,
      catalogList:[],
      catalogid:''
    }
  },
  components: {
    IndexHeader,
    IndexFooter,
    BackUp,
    Swiper,
    ArticleList,
    Advertis
  },
  created() {
    ArticleApi.getCatalogList().then(res => {
      this.catalogList = res.data
    })
  },
  methods:{
    getCatalog(catalogid){
      this.catalogid = catalogid
    }
  }
}
</script>


<style scoped="scoped">
  .el-footer {
    position: relative;
    min-width: 1000px;
/*    border-top: 1px solid #EBEEF5; */
    padding: 0;
    margin: 0;
  }

  .el-header {
    color: white;
    padding: 0px;
    line-height: 60px;
    min-width: 1000px;
  }
  .el-main {
    /* background-color: #f0f0f0; */
    color: #333;
    text-align: center;
    min-width: 1000px;
    padding: 0px;
  }

  .index-catalog{
    flex: 0.5;
    text-align: center;
    /* background-color: #00FFFF; */
    margin: 10px 10px;
    display: block;
  }
  .index-catalog li{
    padding: 15px 0;
    color: #707070;
    background-color: #F5F7FA;
    border-bottom: 1px solid #FFFFFF;
  }
  .index-catalog li a{
    font-size: 14px;
    color:#909399;
  }
  .index-catalog li:hover{
    /* margin: 5px; */
    background-color: #f44444;
  }
  .index-catalog li a:hover{
    font-size: 16px;
  }
</style>
